<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0px;
    }
    /* 顶部部分 */
    .topnav{
        display: flex;
        flex-direction: row; 
        align-items: center;
        justify-content: space-between;
        background-color: white;
        height: 80px;
    }
    .topnav img:nth-child(1){
        width: 20px;
        height: 20px;
        margin-left: 20px;
    }
    /* 栏目 */
    .column{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
    }
    .column span:nth-child(1){
        font-size: 22px;
        color: #505050;
    }
    .column span:nth-child(2){
        font-size: 14px;
        color: #888282;
        margin-top: 20px;
    }
    /* 热门推荐 */
    .hot{
        display: flex;
        margin-top: 60px;
        margin-left: 20px;
    }
    .cycle1{
        height: 10px;
        width: 10px;
        background-color: #ea5235;
        border-radius: 50%;
        
    }
    .hot>span{
        position: relative;
        left: 15px;
        top: -5px;
        color: #505050;
    }
    .text{
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
    }
    .menu{
        height: 32px;
        width: 80px;
        border: 1px solid #eeebeb;
        border-radius: 15px;
        color: #888282;
        text-align: center;
    }
    /* IT互联网 */
    .IT{
        display: flex;
        margin-top: 40px;
        margin-left: 20px;
    }
    .cycle2{
        height: 10px;
        width: 10px;
        background-color: #d937c3;
        border-radius: 50%;
        
    }
    .IT>span{
        position: relative;
        left: 15px;
        top: -5px;
        color: #505050;
    }
    .menu1{
        height: 30px;
        width: 80px;
        border: 1px solid #eeebeb;
        border-radius: 15px;
        color: #888282;
        text-align: center;
        margin-left:-60px ;
    }.menu2{
        height: 30px;
        width: 80px;
        border: 1px solid #eeebeb;
        border-radius: 15px;
        color: #888282;
        text-align: center;
        position: relative;
        left: -120px;
    }
    .menu_{
        height: 32px;
        width: 80px;
        background-color: #33b17b;
        border-radius: 15px;
        color: white;
        text-align: center;
    }
    /* 职场技能 */
    .cycle3{
        height: 10px;
        width: 10px;
        background-color: #6495cb;
        border-radius: 50%;
        
    }
    /* 选好了 */
    .btn{
        height: 50px;
        width: 280px;
        background-color: #33b17b;
        border-radius: 30px;
        color: white;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 50px;
    }
</style>
<body>
    <!-- 顶部部分 -->
    <div class="topnav">
        <img src="../jpg/返回黑.png">
    </div>
    <!-- 栏目 -->
    <div class="column">
        <span>选择你感兴趣的知识</span>
        <span>至少选择1个 可能随时调整</span>
    </div>
    <!-- 热门推荐 -->
    <div class="hot">
        <div class="cycle1"></div>
        <span>热门推荐</span>
    </div>
    <div class="text">
        <span class="menu">人工智能</span>
        <span class="menu">办公软件</span>
        <span class="menu">投资理财</span>
    </div>
    <!-- IT互联网 -->
    <div class="IT">
        <div class="cycle2"></div>
        <span>IT互联网</span>
    </div>
    <div class="text">
        <span class="menu">移动开发</span>
        <span class="menu_">前端开发</span>
        <span class="menu">人工智能</span>
    </div>
    <div class="text">
        <span class="menu">大数据</span>
        <span class="menu">测试运维</span>
        <span class="menu">信息安全</span>
    </div>
    <div class="text">
        <span class="menu">用户体验</span>
        <span class="menu">产品运营</span>
        <span class="menu">产品策划</span>
    </div>
    <div class="text">
        <span class="menu1">Python</span>
        <span class="menu2">java</span>
    </div>
    <!-- 职场技能 -->
    <div class="IT">
        <div class="cycle3"></div>
        <span>职场技能</span>
    </div>
    <div class="text">
        <span class="menu">办公软件</span>
        <span class="menu">求职应聘</span>
        <span class="menu">人工智能</span>
    </div>
    <div class="text">
    </div>
    <!-- 选好了 -->
    <div class="btn">
        <span>选好了</span>
    </div>
</body>
</html>